<!--
 * @Author: Lakeiedward
 * @Date: 2022-03-03 11:45:31
 * @LastEditTime: 2022-03-03 17:39:09
 * @FilePath: \xinde\src\components\one.vue
-->
<template>
  <div class="one">
    <div class="chilrden">
      <li>
        <span>民警姓名</span>
        <el-input
          v-model="input.policesname"
          placeholder="请输入"
          style="width: 300px"
        ></el-input>
      </li>
      <li>
        <span>民警警号</span>
        <el-input
          v-model="input.policewarning"
          placeholder="请输入"
          style="width: 300px"
        ></el-input>
      </li>
      <li>
        <div class="block">
          <span class="demonstration">所属单位</span>
          <el-cascader
            v-model="input.subordinate"
            :options="optionss"
            style="width: 300px"
          ></el-cascader>
        </div>
      </li>
      <li>
        <span>角色</span>
        <el-select
          v-model="input.role"
          placeholder="请选择"
          style="width: 300px"
        >
          <el-option
            v-for="item in roles"
            :key="item.value"
            :label="item.roleName"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </li>
      <li>
        <span>状态</span>
        <el-select
          v-model="input.conditions"
          placeholder="请选择"
          style="width: 300px"
        >
          <el-option
            v-for="item in condition"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </li>
      <div class="query">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="query">查询</el-button>
      </div>
    </div>
    <div>
      <el-button
        type="primary"
        :disabled="show"
        @click="dialogFormVisible = true"
        >修改</el-button
      >
      <el-button type="primary" :disabled="show">查看</el-button>
      <el-button type="primary" :disabled="show">分配角色</el-button>
      <el-button type="primary" :disabled="show">锁定</el-button>
      <el-button type="primary" :disabled="show">重置密码</el-button>
    </div>
    <div v-if="dialogFormVisible" class="amend">
      <el-dialog title="修改" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <li>
            <span>民警警号</span>
            <el-input
              v-model="record[0].policewarning"
              disabled
              style="width: 200px"
            ></el-input>
          </li>
          <li>
            <span>民警姓名</span>
            <el-input
              v-model="record[0].policesname"
              style="width: 200px"
            ></el-input>
          </li>
          <li>
            <span>所属单位</span>
            <el-select
              v-model="record[0].role"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in roles"
                :key="item.value"
                :label="item.roleName"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </li>
          <li>
            <span>联系电话</span>
            <el-input
              v-model="record[0].iphone"
              style="width: 200px"
            ></el-input>
          </li>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @select="selects"
        @select-all="selectall"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="policesname" label="民警姓名"> </el-table-column>
        <el-table-column prop="policewarning" label="民警警号">
        </el-table-column>
        <el-table-column prop="subordinate" label="所属单位"> </el-table-column>
        <el-table-column prop="role" label="角色"> </el-table-column>
        <el-table-column prop="conditions" label="状态"> </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="datalength"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      // 表单输入的数据
      input: {
        // 民警姓名
        policesname: null,
        // 民警警号
        policewarning: null,
        // 所属单位
        subordinate: null,
        // 角色
        role: null,
        // 状态
        conditions: null,
      },
      //状态
      condition: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 1,
          label: "停用",
        },
      ],
      // 部门下拉数据
      optionss: [
        {
          value: 100,
          label: "飞搏数科科技",
          children: [
            {
              value: 101,
              label: "深圳总公司",
              children: [
                {
                  value: 106,
                  label: "财务部门",
                },
                {
                  value: 104,
                  label: "市场部门",
                },
                {
                  value: 103,
                  label: "研发部门",
                },
                {
                  value: 107,
                  label: "运维部门",
                },
                {
                  value: 105,
                  label: "测试部门",
                },
              ],
            },
            {
              value: 102,
              label: "长沙分公司",
              children: [
                {
                  value: 108,
                  label: "市场部门",
                },
                {
                  value: 109,
                  label: "财务部门",
                },
              ],
            },
          ],
        },
      ],
      // 角色下拉数据
      roles: [
        {
          searchValue: null,
          createBy: null,
          createTime: "2022-01-11 15:14:01",
          updateBy: null,
          updateTime: null,
          remark: "普通角色",
          params: {},
          value: 2, //要改一下
          roleName: "普通角色",
          roleKey: "common",
          roleSort: "2",
          dataScope: "2",
          menuCheckStrictly: true,
          deptCheckStrictly: true,
          status: "0",
          delFlag: "0",
          flag: false,
          menuIds: null,
          deptIds: null,
          roleType: "0",
          admin: false,
        },
        {
          searchValue: null,
          createBy: null,
          createTime: "2022-01-11 15:14:01",
          updateBy: null,
          updateTime: null,
          remark: "超级管理员",
          params: {},
          value: 1,
          roleName: "超级管理员",
          roleKey: "admin",
          roleSort: "1",
          dataScope: "1",
          menuCheckStrictly: true,
          deptCheckStrictly: true,
          status: "0",
          delFlag: "0",
          flag: false,
          menuIds: null,
          deptIds: null,
          roleType: "0",
          admin: true,
        },
      ],
      // 表格数据
      tableData: [
        {
          policesname: "张丹丹",
          policewarning: "0654060",
          subordinate: "上海市普陀区金沙江路 1518 弄",
          role: "局长",
          conditions: "正常",
          iphone: 18120135349,
        },
        {
          policesname: "李可",
          policewarning: "5754587",
          subordinate: "上海市普陀区金沙江路 1518 弄",
          role: "局长",
          conditions: "停用",
          iphone: 18120135349,
        },
        {
          policesname: "忘黄",
          policewarning: "785274",
          subordinate: "上海市普陀区金沙江路 1518 弄",
          role: "局长",
          conditions: "正常",
          iphone: 18120135349,
        },
        {
          policesname: "周刚",
          policewarning: "45245245",
          subordinate: "上海市普陀区金沙江路 1518 弄",
          role: "局长",
          conditions: "停用",
          iphone: 18120135349,
        },
        {
          policesname: "赵飞",
          policewarning: "58778578",
          subordinate: "上海市普陀区金沙江路 1518 弄",
          role: "局长",
          conditions: "正常",
          iphone: 18120135349,
        },
        {
          policesname: "王国",
          policewarning: "12355463",
          subordinate: "上海市普陀区金沙江路 1518 弄",
          role: "局长",
          conditions: "正常",
          iphone: 18120135349,
        },
        {
          policesname: "李江",
          policewarning: "7869786",
          subordinate: "上海市普陀区金沙江路 1518 弄",
          role: "局长",
          conditions: "停用",
          iphone: 18120135349,
        },
      ],
      // 每页显示的条数
      pagesize: 10,
      // 一页显示10条数据 [10,20,30] 也可以一页20 30
      pagesizes: [10],
      // 数据的长度 一共多少条数据 根据接口返回的数据
      datalength: 100,
      // 拷贝的表格里的数据 用于重置
      copy: null,
      // 控制按钮的禁止点击
      show: true,
      // 选中该行拿到的数据
      record: [],
      // 修改页面
      dialogFormVisible: false,
      //
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      message: "1",
    };
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 重置按钮
    reset() {
      this.input.policesname = null;
      this.input.policewarning = null;
      this.input.affiliatedunite = null;
      this.input.subordinate = null;
      this.input.role = null;
      this.input.conditions = null;
      this.tableData = this.copy;
    },
    // 查询按钮
    query() {
      this.copy = this.tableData;
      this.tableData = this.tableData.filter((item) => {
        return (
          item.policesname.includes(this.input.policesname) ||
          item.policewarning.includes(this.input.policewarning) ||
          item.subordinate.includes(this.input.subordinate) ||
          item.role.includes(this.input.role) ||
          item.conditions.includes(
            this.input.conditions === 0 ? "正常" : "停用"
          )
        );
      });
    },
    // 选中一行拿到该行数据
    selects(a,e,c) {
      console.log(a,e,c);
      this.record = a;
      if (this.record.length == 1) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    // 全选控制按钮禁止选中
    selectall() {
      this.show = true;
    },
    submit() {
      this.dialogFormVisible = false;
      // 这里就要调用接口

    },
  },
};
</script>
<style scoped lang='scss'>
.chilrden {
  display: flex;
  flex-wrap: wrap;
  width: 1400px;
  li {
    margin-right: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    width: 375px;
    justify-content: space-between;
    align-items: center;
  }
  .query {
    margin-left: 120px;
    margin-top: 20px;
  }
}
.el-form {
  display: flex;
  width: 700px;
  flex-wrap: wrap;
  li {
    margin-bottom: 20px;
    span {
      display: inline-block;
      margin-right: 40px;
      margin-left: 40px;
    }
  }
}
</style>